import { DatePicker } from "antd"
import dayjs from "dayjs"

import { SFormItem } from "@/components/common"
import { ShortcutOptionsType } from "@/components/common/timeSelectionShortcuts/types"
import { useLocale } from "@/locales"
import {
	rangeBeginning,
	rangeCurrentMonth,
	rangeLastWeek,
	rangePastNDays,
	rangePastNMonth,
	rangeToday,
	rangeYesterday
} from "@/utils"

const TimeRangePicker = (props: any) => {
	const { label, name, others, noLabel, shortcuts, isAllowedAllTime = true, ...pickerProps } = props
	const { formatMessage } = useLocale()

	const defaultshortcuts: ShortcutOptionsType[] = [
		{
			label: formatMessage({ id: "common.utils.today" }),
			value: rangeToday()
		},
		{
			label: formatMessage({ id: "common.utils.yesterday" }),
			value: rangeYesterday()
		},
		{
			label: formatMessage({ id: "common.utils.last_week" }),
			value: rangeLastWeek()
		},
		{
			label: formatMessage({ id: "common.utils.last_n_days" }, { n: 7 }),
			value: rangePastNDays(7)
		},
		{
			label: formatMessage({ id: "common.utils.last_n_days" }, { n: 14 }),
			value: rangePastNDays(14)
		},
		{
			label: formatMessage({ id: "common.utils.last_n_days" }, { n: 30 }),
			value: rangePastNDays(30)
		},
		{
			label: formatMessage({ id: "common.utils.last_month" }),
			value: rangePastNMonth(1)
		},
		{
			label: formatMessage({ id: "common.utils.this_month" }),
			value: rangeCurrentMonth()
		},
		{
			label: formatMessage({ id: "common.utils.month3_recent" }),
			value: rangePastNDays(90)
		}
	]
	const presets = shortcuts || defaultshortcuts
	if (isAllowedAllTime)
		presets.push({
			label: formatMessage({ id: "common.utils.select_all_range" }),
			value: rangeBeginning()
		})
	return (
		<SFormItem
			label={noLabel ? undefined : formatMessage({ id: label || "common.createAt" })}
			name={name || "registerTime"}
			{...others}
		>
			<DatePicker.RangePicker showTime={props.showTime ?? true} presets={presets} maxDate={dayjs()} {...pickerProps} />
		</SFormItem>
	)
}

export default TimeRangePicker
